<template>
    <div class="header">
        <i class="logo"></i>
        <div class="nav">
            <ul>
                <li 
                    v-for="(item, index) in navList" 
                    :key="index"
                    :class="{'current':active == item.router}"
                >
                    <router-link 
                        v-if=" item.router " 
                        v-text="item.title"
                        :to="{name: item.router}"
                        @click="active = item.router"
                    ></router-link>
                    <a 
                        v-else 
                        v-text="item.title" 
                        :href="item.url"
                        target="_blank"
                    ></a>
                </li>
            </ul>
        </div>

        <div class="user">
            <i class="el-icon-bell"></i>
            <el-badge :value="7" :max="99" class="message">
                <i class="el-icon-message"></i>
            </el-badge>
            <el-dropdown size="medium">
                <span class="el-dropdown-link">
                    <i class="el-icon-user"></i>
                    <span class="username">{{username}}</span>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    name: "Header",
    data () {
        return {
            active: 'Home',
            username: '梁斯郎',
        }
    },
    props: {
        // 数据数组
        navList: {
            type: Array,
            default: () => []
        },
    },
    components: {
        
    },
    mounted () {
        this.active = this.$route.name;
    },
    watch:{
        '$route.name'(val){
            this.active = val;
        }
    },
    methods: {
        a(item){
            this.active = item.router;
        },
        logout(){
            this.$message.error('其实并没有做');
        }
    },
}
</script>

<style lang="less" scoped>
.header{
    position: relative;
    width: 1200px;
    height: 100%;
    margin: 0 auto;

    .logo{
        display: inline-block;
        width: 125px;
        height: 55px;
        background-image:url("~@/projects/web/assets/images/huiyanlogo.png");
        background-repeat: no-repeat;
        background-size: 100%;
        vertical-align: middle;
    }

    .nav{
        // width: 500px;
        display: inline-block;
        vertical-align: middle;
        ul{
            list-style: none;
            margin-left: 50px;
            li{
                width: 100px;
                text-align: center;
                display: inline-block;
                line-height: 55px;
                
                a{
                    color: rgba(255,255,255,.5);
                    cursor: pointer;
                    text-decoration: none;

                    &:hover{
                        color: #fff;
                    }
                }
            }
            .current{
                a{
                    color: #fff;
                }
            }
        }            
    }
    .user{
        display: inline-block;
        position: absolute;
        text-align: right;
        right: 0;
        cursor: pointer;
        vertical-align: middle;
        height: 55px;
            
        .el-dropdown{
            height: 55px;
            color: #fff;
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
        }

        .username{
            margin-left: 15px;
        }

        /deep/.el-badge__content{
            top: 15px;
        }

        .el-badge{
            margin-right: 15px;
        }

        .el-icon-bell{
            margin-right: 15px;
            vertical-align: middle;
        }
    }
}

</style>